/*@media only screen and (orientation:portrait){
   #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    /*background: transparent;*/
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

@font-face {
    font-family: 'GraphicPixel';
    src: url('../fonts/graphicpixel-webfont.eot');
    src: url('../fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/graphicpixel-webfont.woff') format('woff'),
    url('../fonts/graphicpixel-webfont.ttf') format('truetype'),
    url('../fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AdvoCut';
    src: url('../fonts/advocut-webfont.eot');
    src: url('../fonts/advocut-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/advocut-webfont.woff') format('woff'),
    url('../fonts/advocut-webfont.ttf') format('truetype'),
    url('../fonts/advocut-webfont.svg#AndinaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.gp {font-family: 'GraphicPixel', sans-serif;}


html {}
body {padding:0;margin:0;background-color:#ccc !important;}

canvas {position:absolute;left:0;top:0;background:none;}
#background {background-color:#999;}
.error #background { background-color:#fff; } 

#container{position:absolute;left:0;top:0;width:100%;height:100%;overflow: hidden;}
#container * {z-index: 10}
#container #gameheading {z-index: 0 !important;}

#backgroundbuffer, #animated, #background, #foreground {display:none;/* transform: translateZ(0);*/}
#atmospherebuffer {display:block;}

#backgroundbuffer, #backgroundunscaled, #foregroundunscaled, #textcanvas, #entities, #toptextcanvas, #atmosphere, #atmosphere2  {margin:0; padding:0;transform:none !important;}

#canvas { z-index: 5; }

#canvas, #backgroundunscaled, #foregroundunscaled, #foreground, #backgroundbuffer, #background, #toptextcanvas, footer, #container, #atmosphere, #atmosphere2 {-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;}

.started #canvas {cursor:none;}
#canvas.clickable {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    cursor:default;
    pointer-events:all;
}

@media screen and (max-width: 600px) {

    #entities {
        cursor: default;
    }
}

h1 {font-weight:normal;}

.preload {}


.game #logo {display:none;-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;animation:none;}

/*#logo,  .left-ornament, .right-ornament, #character, #character div, .button, .button div, #scroll, #instructions, .icon, #tilt, .parchment-left, .parchment-middle, .parchment-right, .avatar, .facebook, .twitter, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background:url('../img/1/spritesheet.png');image-rendering:-moz-crisp-edges; image-rendering:-webkit-optimize-contrast;}*/

/*#moztab {height:49px;width:118px;position:fixed;top:0;right:15%;background:url('../img/1/spritesheet.png') no-repeat -229px -204px;display:block;}*/
#vignetting {height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;}
#parchment, #parchment input, #parchment select {font-family:'GraphicPixel';}
#parchment input  {width:50%;background:rgba(0,0,0,0.05);text-align:center;-moz-animation:glow 0.5s linear infinite alternate;-webkit-animation:glow 0.5s linear infinite alternate;-o-animation:glow 0.5s linear infinite alternate;-ms-animation:glow 0.5s linear infinite alternate;color:#eee;}
#parchment select {width:25%;background:rgba(0,0,0,0.05);text-align:center;color:black;}
#parchment input:focus {-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;animation:none;color:#fff;background:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.3);}
#parchment input.field-error {background:rgba(255,0,0,0.1);border-color:#f84444;}
#character div {-moz-transition:0.4s opacity linear;-webkit-transition:0.4s opacity linear;-o-transition:0.4s opacity linear;-ms-transition:0.4s opacity linear;transition:0.4s opacity linear;}
#mask {height:100%;width:100%;position:fixed;top:0;left:0;background:rgba(20,20,20,1);opacity:1;z-index:20;-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;pointer-events:none;}

#notifications {position:absolute;left:50%;text-align:center;font-family:'GraphicPixel';overflow:hidden;}
#notifications div {position:absolute;-moz-transition:none;-webkit-transition:none;top:0;width:100%;}
#notifications div.top {-moz-transition:0.5s top ease;-webkit-transition:0.5s top ease;-o-transition:0.5s top ease;-ms-transition:0.5s top ease;transition:0.5s top ease;}
#notifications div.top #message1 {opacity:0;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;}
#notifications span {display:block;text-align:center;width:100%;opacity:1;-moz-user-select:none;-webkit-user-select:none;}



div.clear{
    float: left;
    clear: both;
    width: 100%;
}

#dropDialog {
    font-family:'GraphicPixel';
    font-size: 9pt;
    color:#e3e3e3;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -76px;
    margin-top: -23px;
    padding: 5px;
    background: rgba(45, 45, 45, 0.8);
    border-radius: 6px 6px 6px 6px;
    display: none;
    z-index:15;
    pointer-events: all;
}
#dropDialog.active {
    display: block;
}
#dropTitle {
    text-align: center;
}
#dropAccept, #dropCancel {
    background: rgb(120, 120, 120);
    cursor: hand;
}


#auctionSellDialog {
    font-family:'GraphicPixel';
    font-size: 9pt;
    color:#e3e3e3;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -76px;
    margin-top: -23px;
    padding: 5px;
    background: rgba(45, 45, 45, 0.8);
    border-radius: 6px 6px 6px 6px;
    display: none;
    z-index:15;
    pointer-events: all;
}
#auctionSellDialog.active {
    display: block;
}
#auctionSellTitle {
    text-align: center;
}
#auctionSellAccept, #auctionSellCancel {
    background: rgb(120, 120, 120);
    cursor: hand;
}


#instructions {position:absolute;top:50%;left:50%;z-index:1000;font-family:'GraphicPixel';pointer-events:none;opacity:0;-moz-transition:0.25s opacity linear;-webkit-transition:0.4s top ease, 0.4s opacity linear;-o-transition:0.4s top ease, 0.4s opacity linear;-ms-transition:0.4s top ease, 0.4s opacity linear;transition:0.4s top ease, 0.4s opacity linear;}
#instructions.active {opacity:1;pointer-events:auto;}

#weapon, #armor {image-rendering:-moz-crisp-edges;}
.link:hover {cursor:pointer;color:#d83939;}
.play img {display:none;}
.play.loading span:hover {color:inherit;cursor:default;}
.play.loading img {display:inline;}

#playername {color:#fff;}
.validation-error {color:#880000;}
@keyframes blink { 0% {color:red;} 100% {color:#880000;}}
@-webkit-keyframes blink { 0% {color:red;} 100% {color:#880000;}}
.blink {-webkit-animation:blink 0.3s linear 5 alternate;-moz-animation:blink 0.3s linear 5 alternate;animation:blink 0.3s linear 5 alternate;}

#playerimage {image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast;}




#seb {clear:both;}
#portrait {display:none;}
#about .link a:hover, #legal a:hover {color:#d83939;}
footer {font-family:'GraphicPixel';position:absolute;bottom:5%;left:0;text-align:center;width:100%;color:#c6c0a3;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;}
.upscaled.game footer {color:#8a8a8a;}

#intro {position:absolute;left:0;top:0;z-index: 20;width:100%;height:100%;}

footer:hover {opacity:1;}
footer div  {display:inline-block;}
#sharing a {display:block;float:right;background-size:844px;position:relative;top:-2px;}
#sharing .facebook {height:22px;width:22px;background-position:-822px -224px;margin:0 12px 0 12px;}
#sharing .facebook:hover {background-position:-822px -224px;}
#sharing .twitter {height:22px;width:32px;background-position:-770px -224px;margin:0 12px 0 0;}
#sharing .twitter:hover {background-position:-770px -224px;}
#sharing .gplus {height:22px;width:22px;background:url('../img/common/gplus.png');margin:0 12px 0 0px;}
#toggle-credits {display:inline-block;margin-left:12px;}
#legal-link a {text-decoration:none;color:inherit;}
#credits-link span:hover, #privacy-link span:hover, #forum-link span:hover, #legal-link a:hover {color:#fcda5c;cursor:pointer;}

#sharing a:hover {-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
#sharing a:active {-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
.close {position:absolute;z-index:20000;}
.close:hover {cursor:pointer;}

.ribbon {position:absolute;}
.ribbon:hover {cursor:pointer;}
.ribbon .top {-moz-transition:0.25s height ease;-webkit-transition:0.25s height ease;-o-transition:0.25s height ease;-ms-transition:0.25s height ease;transition:0.25s height ease;}


#nameinput::-webkit-input-placeholder  {color:#fff;}
#resize-check {position:absolute;height:0;top:0;left:0;-moz-transition:0.001s height ease;-webkit-transition:0.001s height ease;-o-transition:0.001s height ease;-ms-transition:0.001s height ease;transition:0.001s height ease;}

#name-tooltip {width:400px;height:30px;padding:10px 0;font-size:20px;background:#373737;position:absolute;left:50%;margin-left:-200px;color:#fff;border-radius:8px;line-height:30px;top:-40px;opacity:0;-moz-transition:0.25s opacity ease;-webkit-transition:0.25s opacity ease;-o-transition:0.25s opacity ease;-ms-transition:0.25s opacity ease;transition:0.25s opacity ease;pointer-events:none;}
#name-tooltip:after {content:url('../img/common/arrow.png');width:28px;height:16px;position:absolute;bottom:-8px;left:50%;margin-left:-14px;}
#name-tooltip.visible {opacity:.9;}

.opera #name-tooltip {display:none;}
.opera #name-tooltip.visible {display:block;}
.game #confirmation, .game #changePassword, .game #error {display:none;}
#container {z-index:0;background:rgba(0,0,0,0.2);-moz-transition:1s opacity linear 0.5s;-webkit-transition:1s opacity linear 0.5s;-o-transition:1s opacity linear 0.5s;-ms-transition:1s opacity linear 0.5s;transition:1s opacity linear 0.5s;}

#container {opacity:0;}
#container .containerblank {opacity:0;}
#container .containerfadein {
	-moz-transition:2s opacity linear;
	-webkit-transition:2s opacity linear;
	-o-transition:2s opacity linear;
	-ms-transition:2s opacity linear;
	transition:2s opacity linear;
}
@-moz-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
@-webkit-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
@-o-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
@-ms-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}

@-moz-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
@-webkit-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
@-o-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
@-ms-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }

@-moz-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
@-webkit-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
@-o-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
@-ms-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
@-moz-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
@-webkit-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
@-o-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
@-ms-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
@-moz-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
@-webkit-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
@-o-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
@-ms-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}

@-moz-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
@-webkit-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
@-o-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
@-ms-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
@-moz-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
@-webkit-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
@-o-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
@-ms-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
@-moz-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
@-webkit-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
@-o-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
@-ms-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
@-moz-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }
@-webkit-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }
@-o-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }
@-ms-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }


@media screen and (min-width: 1501px), screen and (min-height: 801px) {
	#gui {
		position: absolute;
		left:0;
		top: 0;
		transform-origin: top left;
		-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;
		z-index:10;
		pointer-events:none;
		cursor:none;
	}
	
	#canvas {
		position: absolute;
		left:0;
		top: 0;
	}

    #petconfirm {
        position: absolute;
        width: 150px;
        height: 100px;
        left: calc(50% - 75px);
        top: calc(50% - 50px);
        background: rgba(0, 0, 0, 0.5);
        display: none;
    }    
    #petconfirm * 
    {
        color: rgba(255, 255, 255, 1);
        font-size: 24px;
        text-align: center;    	    
    }
    
    #playerPopupMenuContainer{
        position: absolute;
        width: 150px;
        height: 170px;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        pointer-events: all;
        cursor: hand;        
    }
    #playerPopupMenuContainer div {
        position: absolute;
        left: 0px;
        width: 150px;
        height: 36px;
        background: rgba(0, 0, 0, 0);
        color: rgba(255, 255, 255, 1);
        font-size: 24px;
        text-align: center;
        margin-top: 12px;
    }
    #playerPopupMenuName{ top: 0px; }
    #playerPopupMenuAttack{ top: 36px; }
    #playerPopupMenuPartyInvite{ top: 72px; }
    #playerPopupMenuPartyLeader{ top: 72px; }
    #playerPopupMenuPartyKick{ top: 108px; }
    #playerPopupMenuCardBattle{ top: 134px; }

    #inspector {
        font-family:'GraphicPixel';
        color:#e3e3e3;
        position: absolute;
        top: 15px;
        left: 50%;
        width: 210px;
        margin-left: -105px;
        padding: 6px;
        background: rgba(45,45,45,0.8);
        display: none;
        border-radius: 0 0 9px 9px;
        pointer-events: none;
    }
    #inspector .headshot {
        float: left;
        height: 48px;
        width: 48px;
        border: 3px solid #000;
        margin-right: 4.5px;
        background: #FFF;
        overflow: hidden;
    }
    #inspector .headshot div {
        position: relative;
        top: 50%;
        left: 50%;
    }
    #inspector .details {
        float: left;
        width: 150px;
    }
    #inspector .health {
        float: left;
        height: 15px;
        width: 100%;
        background: red;
        clear: left;
    }


    #iteminfo {
        display: none;
        position: absolute;
        width: 1350px;
        height: 336px;
        top: 48px;
        left: 50%;
        margin-left: -675px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        text-align: center;
        font-size: 48px;
        padding-top: 48px;
    }

    #chatbox {
        position: absolute;
        left: 52%;
        top: 25%;
        width: 788px;
        height: 32px;
        margin-left: -394px;
        background-image: url('../img/2/main.png');
        background-position: 0px -596px;
        display: none;
    }
    #chatbox.active {
        display: block;
    }
    #chatbox input {
        font-size:20px;
        color:#eee;
        background:none;
        width:90%;
        border:0;
        margin-left:2%;
        padding:7px 0;
    }
    #chatbox .legend{
        position: absoute;
        top: -20px;
        left: 10px;
        padding: 4px 6px;
        color: #FFF;
        background: rgba(45,45,45,0.8);
        z_index: 4;
        border-radius: 3px 3px 0 0;
        diplay: none;
    }
    #chatbox .legend p{
        line-height: 1;
    }
    /*.upscaled #logo, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #scroll, .upscaled #instructions, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/3/spritesheet.png');}*/
    body {
    	background-color: black;
        /*background-size:     cover;                  
        background-repeat:   no-repeat;
        background-position: center center;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;*/
    }

    #logo, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #scroll, #instructions, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:1266px auto;}
    #character {height:63px;width:36px;margin:0 auto;background-position:-1062px -36px;margin-top:45px;position:relative;}
    #character div {height:63px;width:36px;position:absolute;top:0;left:0;background-position:-1098px -36px;opacity:1;}
    #character.disabled div {opacity:0;pointer-events:none;}
    #parchment input {margin-top:30px; padding:0 15px; border:3px dashed #b2af9b; font-size:30px;border-radius:9px;height:61px;}
    #parchment select {margin-top:24px; padding:0 15px; border:3px dashed #b2af9b; font-size:30px;border-radius:9px;height:48px;}
    /*.button {height:153px;width:375px;background-position:-687px -306px;margin:30px auto 0 auto;position:relative;}*/
    .play div {height:153px;width:375px;background-position:-687px 0px;}
    .play div:active {background-position:-687px -459px;}
    .play.loading div {background-position:-681px -2178px;}
    .play.loading img {width:24px;height:24px;}
    /*.stroke {text-shadow:3px 3px 0 #373737, 3px -3px 0 #373737, 0 3px 0 #373737, 3px 0 0 #373737, -3px 3px 0 #373737, -3px -3px 0 #373737, 0 -3px 0 #373737, 0 3px 0 #373737, -3px 0 0 #373737;}*/
    #playername {margin-top:15px;}
    .confirmation .delete {margin:15px auto 15px auto;}
    .button.delete {background-position:-687px -153px;}
    .button.delete:active {background-position:0 -2178px;}
    .validation-error {font-size:22px;}

    #container {
    	position:absolute;
    	top:0;
    	left:0;
    }

    #board{
        position: absolute;
        width: 470px;
        left: 50%;
        margin-left: -735px;
        top: 750px;
        bottom: 10px;
        border: 1px solid #9C9898;
        background: rgba(255, 255, 2555, 1);
        padding: 5px;
        overflow-y: scroll;
        overflow-x: hidden;
        display: none;
    }
    #board td, #board th
    {
        font-size:1.2em;
        border:1px solid #98bf21;
        padding:3px 7px 2px 7px;
        margin:10px 10px 10px 10px;
    }
    #board th
    {
        font-size:1.4em;
        text-align:left;
        padding-top:5px;
        padding-bottom:4px;
        background-color:#A7C942;
        color:#000;
    }
    #board tr.alt td
    {
        color:#000;
        background-color:#EAF2D3;
    }
    #gamebutton {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 50%;
        margin-left: -767px;
        top: 750px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        display: none;
    }
    #boardbutton {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 50%;
        margin-left: -767px;
        top: 780px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        display: none;
    }
    #up {
        position: relative;
        top: 10px;
        width: 100px;
        height: 30px;
        background: rgba(0, 0, 255, 0.7);
        text-align: center;
    }
    #down {
        position: relative;
        top: -20px;
        width: 100px;
        height: 30px;
        margin-left: 110px;
        background: rgba(255, 0, 0, 0.7);
        text-align: center;
    }
    #write {
        position: relative;
        width: 100px;
        height: 30px;
        background: rgba(0, 255, 0, 0.7);
        text-align: center;
    }
    #prevpage {
        background: rgba(255, 0, 255, 0.7);
    }
    #nextpage {
        width: 100px;
        height: 30px;
        background: rgba(255, 0, 255, 0.7);
    }
    #viewreply {
        position: relative;
        width: 100px;
        height: 30px;
        background: rgba(255, 255, 0, 0.7);
    }
    #boardlist1 {}
    #boardlist2 {}
    #boardlist3 {}
    #boardlist4 {}
    #boardlist5 {}
    #boardlist6 {}
    #boardlist7 {}
    #boardlist8 {}
    #boardlist9 {}
    #boardlist10 {}
    tr:hover {
        background: rgba(0, 128, 0, 0.5);
    }

    #textWindow{
        position: absolute;
        top: 10%;
        left: 5%;
        width: 88%;
        height: 50%;
        background: rgba(0,0,0,0.7);
        color: rgba(255, 255, 255, 1);
        margin-left: 0px;
        padding: 1%;
        border: 0px;
    }
    #textWindow h1 {font-size:64px;}
    #textWindow h2 {font-size:48px;}
    #textWindow h3 {font-size:32px;}
    #textWindow h4 {font-size:24px;}
    #textWindow h5 {font-size:16px;text-indent:16px;}
    #textWindow h6 {font-size:12px;text-indent:32px;}
    #textWindow p {font-size:12px;text-indent:32px;margin:2px 2px;}
    #textWindow td {color: rgba(255, 255, 255, 1);}

    #mainborder {
        position: absolute;
        top:0px !important;
        left:0;
        border:0;
        padding:0;
    }

    #fade {width:1440px;height:672px;top:15px;left:15px;}

    #instructions {height:516px;width:1251px;background-position:0 -1581px;margin-left:-624px;margin-top:-279px;color:#373737;}
    #instructions h1 {font-size:40px;text-align:center;margin:50px 0;}
    #instructions ul {font-size:30px;margin-top:30px;}
    #instructions ul li {margin:20px 0; clear:left;}
    #instructions li:nth-child(1) span {height:87px;width:45px;background-position:-1134px -36px; display:block;float:left;margin: 0 30px 9px 60px;position: relative;top: -39px;}
    #instructions li:nth-child(2) span {height:48px;width:39px;background-position:-1179px -36px; display:block;float:left;margin: 0 36px 42px 60px;position: relative;top: -9px;}
    #instructions li:nth-child(3) span {height:63px;width:48px;background-position:-1218px -36px; display:block;float:left;margin: 0 27px 0 60px;position: relative;top: -18px;}
    #instructions p {text-align:center;font-family:'GraphicPixel';font-size:20px;clear:left;margin-top:50px;}

    #playerimage {height: 96px; width: 96px;}

    .close {height:48px;width:48px;top:-12px;right:-15px;background-position:-1062px -378px;}
    .close:hover {background-position:-1110px -378px;}
    .close:active {background-position:-1158px -378px;}







    #notifications {width:601px;margin-left:-301px;font-size:20px;color:#eee;top:6px;height:45px;}
    #notifications div.top {top:-45px;}
    #notifications span {line-height:45px;height:45px;}


    .barbutton {background-size:1440px;height:45px;width:42px;}


    #credits, #about {width:1266px;height:546px;margin-left:-633px;margin-top:-273px;font-size:30px;}
    .parchment-left, .parchment-right, .parchment-middle {background-size:1266px;}
    .parchment-left {width:114px;height:546px;background-position:0 -882px;}
    .parchment-right {width:114px;height:546px;background-position:-1152px -882px;}
    .parchment-middle {height:546px;background-position:-114px -882px;width:1038px;margin-left:-519px;}

    #credits h1, #about h1 {margin-top:35px;font-weight:normal;}
    #credits h1 a {font-size:36px;}
    .game #credits h1, .game #about h1 {margin-top:52px;}
    #credits h1 span.title {max-width:300px;display:inline-block;line-height:39px;margin-top:-90px;position:relative;top:36px;}
    #authors {clear:both;margin-top:100px;}
    #guillaume, #franck {width:47%;line-height:36px;}
    #guillaume {float:left;text-align:right;}
    #franck {float:right;text-align:left;}
    .avatar {height:75px;width:39px;}
    #guillaume .avatar {float:right;background-position:-1062px -303px;margin-left:60px;}
    #franck .avatar {float:left;background-position:-1101px -303px;margin-right:60px;}
    #seb {margin:270px auto 0 auto;width:54%;color:#373737;font-size:25px;}
    #seb a {color:#373737;text-decoration:none;}
    #seb a:hover {color:#397cd8;}
    #note {float:left;background-position:-1203px -336px;height:33px;width:30px;}
    #close-credits {margin:45px auto 0 auto;text-align:center;clear:both;font-size:20px;color:#373737;}
    #sharing {width:240px;}


    #about h1 span.title {max-width:400px;display:inline-block;line-height:39px;margin-top:-90px;position:relative;}
    #close-about {margin:230px auto 0 auto;text-align:center;clear:both;font-size:20px;color:#373737;}
    #about #game-desc {font-size:28px;text-align:center;max-width:70%;margin:30px auto;line-height:34px;}
    #about .left p, #about .right p {font-size:20px;text-align:left;line-height:26px;padding:0;margin-top:-10px;}
    #about .left {width:31%;float:left;margin-left:12%;}
    #about .right {width:37%;float:right;margin-right:12%;}
    #about .left .img {height:90px;width:81px;float:left;background-position:-1062px -516px;margin-right:20px;}
    #about .right .img {height:90px;width:168px;float:left;background-position:-1062px -426px;margin-right:20px;}
    #about .link {clear:both;font-size:20px;margin:30px 0;display:block;text-align:left;line-height:16px;}
    #about .link a {color:#2e7fdd;text-decoration:none;}
    #about .link .ext-link {height:18px;width:18px;background-position:-1197px -516px;display:block;float:left;margin-right:10px;}

    .animate .parchment-middle {-moz-animation:parchmiddle3 1s ease 1;-webkit-animation:parchmiddle3 1s ease 1;-o-animation:parchmiddle3 1s ease 1;-ms-animation:parchmiddle3 1s ease 1;}
    .game .parchment-middle {background-position: -633px -882px;}
    .game.credits .parchment-middle, .game.death .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:1038px;margin-left:-519px;background-position: -114px -882px;}

    footer {font-size:20px;}
    #resize-check {height:3px;}
}


@media screen and (max-width: 1500px), screen and (max-height: 870px) {
	#gui {
		position: absolute;
		left:0;
		top: 0;
		transform-origin: top left;
		-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;
		z-index:10;
		pointer-events:none;
		cursor:none;		
	}
	
	#canvas {
		position: absolute;
		left:0;
		top: 0;
		margin-left:0;
		margin-top:0;
		/*border:1px solid #0f0;*/
	}
    
    #petconfirm {
        position: absolute;
        width: 74px;
        height: 50px;
        left: calc(50% - 37px);
        top: calc(50% - 25px);
        background: rgba(0, 0, 0, 0.5);
        display: none;
    }    
    #petconfirm * 
    {
        color: rgba(255, 255, 255, 1);
        font-size: 12px;
        text-align: center;    	    
    }
    
    #playerPopupMenuContainer{
        position: absolute;
        width: 60px;
        height: 67px;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        pointer-events: all;
        cursor: hand;
        
    }
    #playerPopupMenuContainer div {
        position: absolute;
        left: 0px;
        width: 60px;
        height: 18px;
        background: rgba(0, 0, 0, 0);
        color: rgba(255, 255, 255, 1);
        font-size: 12px;
        text-align: center;
        margin-top: 6px;
    }
    #playerPopupMenuName{ top: 0px; }
    #playerPopupMenuAttack{ top: 18px; }
    #playerPopupMenuPartyInvite{ top: 36px; }
    #playerPopupMenuPartyLeader{ top: 36px; }
    #playerPopupMenuPartyKick{ top: 54px; }
    
    #inspector {
        font-family:'GraphicPixel';
        color:#e3e3e3;
        position: absolute;
        top: 10px;
        left: 50%;
        width: 140px;
        margin-left: -70px;
        padding: 4px;
        background: rgba(45,45,45,0.8);
        display: none;
        border-radius: 0 0 6px 6px;
        pointer-events: none;
    }
    #inspector .headshot {
        float: left;
        height: 32px;
        width: 32px;
        border: 2px solid #000;
        margin-right: 3px;
        background: #FFF;
        overflow: hidden;
    }
    #inspector .headshot div {
        position: relative;
        top: 50%;
        left: 50%;
    }
    #inspector .details {
        float: left;
        width: 100px;
    }
    #inspector .health {
        float: left;
        height: 10px;
        width: 100%;
        background: red;
        clear: left;
    }




    #iteminfo {
        display: none;
        position: absolute;
        width: 900px;
        height: 224px;
        top: 32px;
        left: 50%;
        margin-left: -450px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        text-align: center;
        font-size: 32px;
        padding-top: 32px;
    }

    #chatbox{
        position: absolute;
        left: 50%;
        top: 25%;
        width: 520px;
        height: 32px;
        margin-left: -260px;
        background-image: url('../img/2/main.png');
        background-position: 0px -596px;
        display: none;
    }
    #chatbox.active {
        display: block;
    }
    #chatbox input {
        font-size:20px;
        color:#eee;
        background:none;
        width:90%;
        border:0;
        margin-left:2%;
        padding:7px 0;
    }
    #chatbox .legend{
        position: absoute;
        top: -20px;
        left: 10px;
        padding: 4px 6px;
        color: #FFF;
        background: rgba(45,45,45,0.8);
        z_index: 4;
        border-radius: 3px 3px 0 0;
        diplay: none;
    }
    #chatbox .legend p{
        line-height: 1;
    }

        /*.upscaled #logo, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #scroll, .upscaled #instructions, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/2/spritesheet.png');}*/
        body {
        background-color:#000;
        /*background-size:     cover;
        background-repeat:   no-repeat;
        background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;*/
        }
    #logo, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #scroll, #instructions, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:844px auto;}
    #logo {height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;}
    #character {height:42px;width:24px;margin:0 auto;background-position:-708px -24px;margin-top:30px;position:relative;}
    #character div {height:42px;width:24px;position:absolute;top:0;left:0;background-position:-732px -24px;opacity:1;}
    #character.disabled div {opacity:0;pointer-events:none;}
    #parchment input {margin-top:20px; padding:0 10px; border:2px dashed #b2af9b; font-size:20px;border-radius:6px;height:41px;}
    #parchment select {margin-top:16px; padding:0 10px; border:2px dashed #b2af9b; font-size:20px;border-radius:6px;height:32px;width:23%;}
    /*.button {height:102px;width:250px;background-position:-458px -204px;margin:20px auto 0 auto;position:relative;}*/
    .play div {height:102px;width:250px;background-position:-458px 0px;}
    .play div:active {background-position:-458px -306px;}
    .play.loading div {background-position:-454px -1452px;}
    .play.loading img {height:16px;width:16px;}
    /*.stroke {text-shadow:2px 2px 0 #373737, 2px -2px 0 #373737, 0 2px 0 #373737, 2px 0 0 #373737, -2px 2px 0 #373737, -2px -2px 0 #373737, 0 -2px 0 #373737, 0 2px 0 #373737, -2px 0 0 #373737;}*/

    #changePassword h1, #confirmation h1, #error h1, #legal h1 {margin-top:20px;}
    #playername {margin-top:10px;}
    .confirmation .delete {margin:10px auto 10px auto;}
    .button.delete {background-position:-458px -102px;}
    .button.delete:active {background-position:0 -1452px;}

    #container {
    	position:absolute;
    	top:0;
    	left:0;
    	margin:0;
    	padding:0;    
    }


    #kungLog{
        position: absolute;
        width: 180px;
        left: 50%;
        margin-left: 200px;
        top: 100%;
        bottom: 10px;
        border: 1px solid #9C9898;
        background: rgba(45, 45, 45, 1);
        padding: 5px;
        overflow-y: scroll;
        overflow-x: hide;
        display: none;
    }
    #kungLog p{
        margin-bottom: 3px;
        padding: 0;
        line-height: 1;
        color: rgba(255,255,255,1);
    }


    #board{
        position: absolute;
        width: 470px;
        left: 50%;
        margin-left: -480px;
        top: 500px;
        bottom: 10px;
        border: 1px solid #9C9898;
        background: rgba(255, 255, 2555, 1);
        padding: 5px;
        overflow-y: scroll;
        overflow-x: hide;
        display: none;
    }

    #board td, #board th
    {
        font-size:1.2em;
        border:1px solid #98bf21;
        padding:10px 10px 10px 10px;
    }
    #board th
    {
        font-size:1.4em;
        text-align:left;
        padding-top:5px;
        padding-bottom:4px;
        background-color:#A7C942;
        color:#000;
    }
    #board tr.alt td
    {
        color:#000;
        background-color:#EAF2D3;
    }
    #gamebutton {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 50%;
        margin-left: -512px;
        top: 500px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        display: none;
    }
    #boardbutton {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 50%;
        margin-left: -512px;
        top: 530px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        display: none;
    }
    #up {
        position: relative;
        top: 10px;
        width: 100px;
        height: 30px;
        background: rgba(0, 0, 255, 0.7);
        text-align: center;
    }
    #down {
        position: relative;
        top: -20px;
        width: 100px;
        height: 30px;
        margin-left: 110px;
        background: rgba(255, 0, 0, 0.7);
        text-align: center;
    }
    #write {
        position: relative;
        width: 100px;
        height: 30px;
        background: rgba(0, 255, 0, 0.7);
        text-align: center;
    }
    #prevpage {
        background: rgba(255, 0, 255, 0.7);
    }
    #nextpage {
        width: 100px;
        height: 30px;
        background: rgba(255, 0, 255, 0.7);
    }
    #viewreply {
        position: relative;
        width: 100px;
        height: 30px;
        background: rgba(255, 255, 0, 0.7);
    }
    #boardlist1 {}
    #boardlist2 {}
    #boardlist3 {}
    #boardlist4 {}
    #boardlist5 {}
    #boardlist6 {}
    #boardlist7 {}
    #boardlist8 {}
    #boardlist9 {}
    #boardlist10 {}
    tr:hover {
        background: rgba(0, 128, 0, 0.5);
    }

    #textWindow{
        position: absolute;
        top: 10%;
        left: 5%;
        width: 88%;
        height: 50%;
        background: rgba(0,0,0,0.7);
        color: rgba(255, 255, 255, 1);
        margin-left: 0px;
        padding: 1%;
        border: 0px;
    }

//2 - Upscale here



      #textWindow h1 {font-size:64px;}
    #textWindow h2 {font-size:48px;}
    #textWindow h3 {font-size:32px;}
    #textWindow h4 {font-size:24px;}
    #textWindow h5 {font-size:16px;text-indent:16px;}
    #textWindow h6 {font-size:12px;text-indent:32px;}
    #textWindow p {font-size:12px;text-indent:32px;margin:2px 2px;}
    #textWindow td {color: rgba(255, 255, 255, 1);}
//#canvasborder {padding:10px;background:url('../img/2/border.png') no-repeat;}


    #mainborder {
        position:absolute;
        top:0;
        width: 980px;
        height: 500px;
        border:0;
        padding:0;
    }



    #fade {width:960px;height:448px;top:10px;left:10px;}
    #instructions {height:344px;width:834px;background-position:0 -1054px;margin-left:-416px;margin-top:-186px;color:#373737;}
    #instructions h1 {font-size:30px;text-align:center;margin:40px 0;}
    #instructions ul {font-size:20px;margin-top:40px;}
    #instructions ul li {margin:20px 0; clear:left;}
    #instructions li:nth-child(1) span {height:58px;width:30px;background-position:-756px -24px; display:block;float:left;margin: 0 20px 6px 40px;position: relative;top: -26px;}
    #instructions li:nth-child(2) span {height:32px;width:26px;background-position:-786px -24px; display:block;float:left;margin: 0 24px 28px 40px;position: relative;top: -6px;}
    #instructions li:nth-child(3) span {height:42px;width:32px;background-position:-812px -24px; display:block;float:left;margin: 0 18px 0 40px;position: relative;top: -12px;}
    #instructions p {text-align:center;font-family:'GraphicPixel';font-size:20px;clear:left;margin-top:20px;}
    #playerimage {height: 64px; width: 64px;}

    .close {height:32px;width:32px;top:-8px;right:-10px;background-position:-708px -252px;}
    .close:hover {background-position:-740px -252px;}
    .close:active {background-position:-772px -252px;}


    #close-legal {font-size:14px;margin-top:30px;}






    #notifications {width:405px;margin-left:-204px;font-size:16px;color:#eee;top:4px;height:30px;}
    #notifications div.top {top:-30px;}
    #notifications span {line-height:30px;height:30px;}

    .windows #notifications span {line-height:34px;}
    .barbutton {background-size:960px;height:30px;width:28px;}

    #credits, #about {width:844px;height:364px;margin-left:-422px;margin-top:-182px;font-size:20px;}
    .parchment-left, .parchment-right, .parchment-middle {background-size:844px;}
    .parchment-left {width:76px;height:364px;background-position:0 -588px;}
    .parchment-right {width:76px;height:364px;background-position:-768px -588px;}
    .parchment-middle {height:364px;background-position:-76px -588px;width:692px;margin-left:-346px;}
    #credits h1, #about h1 {margin-top:25px;font-weight:normal;}
    #credits h1 a {font-size:24px;}
    .game #credits h1, .game #about h1 {margin-top:40px;}
    #credits h1 span.title {max-width:200px;display:inline-block;line-height:26px;margin-top:-60px;position:relative;top:24px;}
    #authors {clear:both;margin-top:70px;}
    #guillaume, #franck {width:47%;line-height:26px;}
    #guillaume {float:left;text-align:right;}
    #franck {float:right;text-align:left;}
    .avatar {height:50px;width:26px;}
    #guillaume .avatar {float:right;background-position:-708px -202px;margin-left:40px;}
    #franck .avatar {float:left;background-position:-734px -202px;margin-right:40px;}
    #seb {margin:180px auto 0 auto;width:52%;color:#373737;font-size:16px;}
    #seb a {color:#373737;text-decoration:none;}
    #seb a:hover {color:#397cd8;}
    #note {float:left;background-position:-802px -224px;height:22px;width:20px;}
    #close-credits {margin:20px auto 0 auto;text-align:center;clear:both;font-size:14px;}
    #sharing {width:202px;}


    #about h1 span.title {max-width:400px;display:inline-block;line-height:24px;margin-top:-90px;position:relative;}
    #close-about {margin:153px auto 0 auto;text-align:center;clear:both;font-size:14px;color:#373737;}
    #about #game-desc {font-size:18px;text-align:center;max-width:70%;margin:25px auto;line-height:24px;}
    #about .left p, #about .right p {font-size:14px;text-align:left;line-height:20px;padding:0;margin-top:-8px;}
    .windows #about .left p, .windows #about .right p {font-size:13px;text-align:left;line-height:20px;padding:0;margin-top:-10px;}
    #about .left {width:31%;float:left;margin-left:12%;}
    #about .right {width:37%;float:right;margin-right:12%;}
    #about .left .img {height:60px;width:54px;float:left;background-position:-708px -344px;margin-right:14px;}
    #about .right .img {height:60px;width:112px;float:left;background-position:-708px -284px;margin-right:14px;}
    #about .link {clear:both;font-size:14px;margin:20px 0;display:block;text-align:left;line-height:10px;}
    #about .link a {color:#2e7fdd;text-decoration:none;}
    #about .link .ext-link {height:12px;width:12px;background-position:-798px -344px;display:block;float:left;margin-right:7px;}

    .animate .parchment-middle {-moz-animation:parchmiddle2 1s ease 1;-webkit-animation:parchmiddle2 1s ease 1;-o-animation:parchmiddle2 1s ease 1;-ms-animation:parchmiddle2 1s ease 1;}
    .game .parchment-middle {background-position: -422px -588px;}
    .game.credits .parchment-middle, .game.death .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:692px;margin-left:-346px;background-position: -76px -588px;}

    footer {font-size:16px;}
    #resize-check {height:2px;}

    #toggle-legal, #legal-link a {padding:0 8px;}

    #name-tooltip {font-size:14px;width:280px;margin-left:-140px;height:20px;line-height:18px;top:-30px;}
    #name-tooltip:after {bottom:-8px;}

}

@media screen and (max-width: 1000px) {
	#gui {
		position: absolute;
		left: 0;
		top: 0;
		transform-origin: top left;
		-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;
		z-index:10;
		pointer-events:none;
		cursor:none;		
	}

    #petconfirm {
        position: absolute;
        width: 38px;
        height: 24px;
        left: calc(50% - 19px);
        top: calc(50% - 12px);
        background: rgba(0, 0, 0, 0.5);
        display: none;
    }    
    #petconfirm * 
    {
        color: rgba(255, 255, 255, 1);
        font-size: 6px;
        text-align: center;    	    
    }
    
    #playerPopupMenuContainer{
        position: absolute;
        width: 30px;
        height: 33px;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        pointer-events: all;
        cursor: hand;
    }
    #playerPopupMenuContainer div {
        position: absolute;
        left: 0px;
        width: 30px;
        height: 9px;
        background: rgba(0, 0, 0, 0);
        color: rgba(255, 255, 255, 1);
        font-size: 6px;
        text-align: center;
        margin-top: 3px;
    }
    #playerPopupMenuName{ top: 0px; }
    #playerPopupMenuAttack{ top: 9px; }
    #playerPopupMenuPartyInvite{ top: 18px; }
    #playerPopupMenuPartyLeader{ top: 18px; }
    #playerPopupMenuPartyKick{ top: 27px; }

    #inspector {
        font-family:'GraphicPixel';
        color:#e3e3e3;
        position: absolute;
        top: 5px;
        left: 50%;
        width: 70px;
        margin-left: -35px;
        padding: 2px;
        background: rgba(45,45,45,0.8);
        display: none;
        border-radius: 0 0 3px 3px;
        pointer-events: none;
    }
    #inspector .headshot {
        float: left;
        height: 16px;
        width: 16px;
        border: 1px solid #000;
        margin-right: 1.5px;
        background: #FFF;
        overflow: hidden;
    }
    #inspector .headshot div {
        position: relative;
        top: 50%;
        left: 50%;
    }
    #inspector .details {
        float: left;
        width: 50px;
    }
    #inspector .health {
        float: left;
        height: 5px;
        width: 100%;
        background: red;
        clear: left;
    }
    #inspector .name {
        font-size: 8px !important;    	    
    }

    #iteminfo {
        display: none;
        position: absolute;
        width: 450px;
        height: 112px;
        top: 16px;
        left: 50%;
        margin-left: -225px;
        border: 1px solid #9C9898;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        text-align: center;
        font-size: 8px;
        padding-top: 16px;
    }

    #chatbox{
        position: absolute;
        left: 50%;
        top: 25%;
        width: 260px;
        height: 16px;
        margin-left: -130px;
        background-image: url('../img/1/main.png');
        background-position: 0px -298px;
        display: none;
    }
    #chatbox.active {
        display: block;
        
    }
    #chatbox input {
        font-size:10px;
        color:#eee;
        background:none;
        width:90%;
        border:0;
        margin-left:2%;
        padding:3.5px 0;
    }
    #chatbox .legend{
        position: absoute;
        top: -10px;
        left: 5px;
        padding: 2px 3px;
        color: #FFF;
        background: rgba(45,45,45,0.8);
        z_index: 2;
        border-radius: 3px 3px 0 0;
        diplay: none;
    }
    #chatbox .legend p{
        line-height: 1;
    }



    canvas {image-rendering:optimizeSpeed;}
    body {
		background-color: #000;
        /*background:url('../img/common/background.jpg');
        background-size:     cover;
        background-repeat:   no-repeat;
        background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;*/
    }
    #logo,  .left-ornament, .right-ornament, #character, #character div, .button, .button div, #scroll, #instructions, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:422px auto;}
    #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;}
    #character {height:21px;width:12px;margin:0 auto;background-position:-354px -12px;margin-top:15px;position:relative;}
    #character div {height:21px;width:12px;position:absolute;top:0;left:0;background-position:-366px -12px;opacity:1;}
    #character.disabled div {opacity:0;pointer-events:none;}
    #parchment input {margin-top:10px; padding:0 5px; border:1px dashed #b2af9b; font-size:10px;border-radius:3px;height:21px;}
    #parchment select {margin-top:8px; padding:0 5px; border:1px dashed #b2af9b; font-size:10px;border-radius:3px;height:16px;width:24%;}
    /*.button {height:51px;width:125px;background-position:-229px -102px;margin:10px auto 0 auto;position:relative;}*/
    .play div {height:51px;width:125px;background-position:-229px 0px;}
    .play div:active {background-position:-229px -153px;}
    .play.loading div {background-position:-227px -726px;}
    .play.loading img {height:11px;width:11px;}
    /*.stroke {text-shadow:1px 1px 0 #373737, 1px -1px 0 #373737, 0 1px 0 #373737, 1px 0 0 #373737, -1px 1px 0 #373737, -1px -1px 0 #373737, 0 -1px 0 #373737, 0 1px 0 #373737, -1px 0 0 #373737;}*/

    #changePassword h1, #confirmation h1, #error h1, #legal h1 {margin-top:20px;}
    #playername {margin-top:5px;}
    .confirmation .delete {margin:5px auto 5px auto;}
    .button.delete {background-position:-229px -51px;}
    .button.delete:active {background-position:0 -726px;}
    .validation-error {font-size:11px;}

    #container {
    	margin:0;
    	position:absolute;
    }

    #fade {width:480px;height:224px;top:5px;left:5px;}

    #instructions {height:172px;width:417px;background-position:0 -527px;margin-left:-208px;margin-top:-93px;color:#373737;}
    #instructions h1 {font-size:20px;text-align:center;margin-bottom:0;}
    #instructions ul {font-size:10px;margin-top:10px;}
    #instructions ul li {margin:10px 0; clear:left;}
    #instructions li:nth-child(1) span {height:29px;width:15px;background-position:-378px -12px; display:block;float:left;margin: 0 10px 3px 20px;position: relative;top: -13px;}
    #instructions li:nth-child(2) span {height:16px;width:13px;background-position:-393px -12px; display:block;float:left;margin: 0 12px 14px 20px;position: relative;top: -3px;}
    #instructions li:nth-child(3) span {height:21px;width:16px;background-position:-406px -12px; display:block;float:left;margin: 0 9px 0 20px;position: relative;top: -6px;}
    #instructions p {text-align:center;font-family:'GraphicPixel';font-size:10px;clear:left;margin:0;}

    #toptextcanvas { cursor: default;}
    #playerimage {height: 32px; width: 32px;}

    .close {height:16px;width:16px;top:-4px;right:-5px;background-position:-354px -126px;}
    .close:hover {background-position:-370px -126px;}
    .close:active {background-position:-386px -126px;}

    #close-legal {font-size:10px;margin-top:10px;}




    #notifications {width:204px;margin-left:-102px;font-size:10px;color:#eee;top:2px;height:15px;}
    #notifications div.top {top:-15px;}
    #notifications span {line-height:15px;height:15px;}
    .barbutton {background-size:480px;height:15px;width:14px;}


    #credits, #about {width:422px;height:182px;top:50%;margin-left:-211px;margin-top:-91px;font-size:10px;}
    #credits h1 a {font-size:12px;}
    .parchment-left, .parchment-right, .parchment-middle {background-size:422px;}
    .parchment-left {width:38px;height:182px;background-position:0 -294px;}
    .parchment-right {width:38px;height:182px;background-position:-384px -294px;}
    .parchment-middle {height:182px;background-position:-38px -294px;width:346px;margin-left:-173px;}

    #credits h1, #about h1 {margin-top:12px;font-weight:normal;}
    .game #credits h1, .game #about h1 {margin-top:20px;}
    #credits h1 span.title {max-width:100px;display:inline-block;line-height:13px;margin-top:-30px;position:relative;top:12px;}
    #authors {clear:both;margin-top:36px;}
    #guillaume, #franck {width:47%;line-height:13px;}
    #guillaume {float:left;text-align:right;}
    #franck {float:right;text-align:left;}
    .avatar {height:25px;width:13px;}
    #guillaume .avatar {float:right;background-position:-354px -101px;margin-left:20px;}
    #franck .avatar {float:left;background-position:-367px -101px;margin-right:20px;}
    #seb {margin:90px auto 0 auto;width:64%;color:#373737;font-size:10px;}
    #seb a {color:#373737;text-decoration:none;}
    #seb a:hover {color:#397cd8;}
    #note {float:left;background-position:-401px -112px;height:11px;width:10px;}
    #close-credits {margin:12px auto 0 auto;text-align:center;clear:both;font-size:10px;}
    #sharing {width:202px;}


    #about h1 span.title {max-width:400px;display:inline-block;line-height:24px;margin-top:-30px;position:relative;margin-bottom:-10px;}
    #close-about {margin:77px auto 0 auto;text-align:center;clear:both;font-size:10px;color:#373737;}
    #about #game-desc {font-size:10px;text-align:center;max-width:70%;margin:10px auto;line-height:14px;}
    #about .left p, #about .right p {font-size:9px;text-align:left;line-height:10px;padding:0;margin-top:-6px;}
    #about .left {width:37%;float:left;margin-left:10%;}
    #about .right {width:37%;float:right;margin-right:12%;}
    #about .img {display:none;}
    #about .link {clear:both;font-size:9px;margin:10px 0;display:block;text-align:left;line-height:5px;}
    #about .link a {color:#2e7fdd;text-decoration:none;}
    #about .link .ext-link {height:6px;width:6px;background-position:-399px -172px;display:block;float:left;margin-right:4px;}

    .animate .parchment-middle {-moz-animation:parchmiddle1 1s ease 1;-webkit-animation:parchmiddle1 1s ease 1;-o-animation:parchmiddle1 1s ease 1;-ms-animation:parchmiddle1 1s ease 1;}

    .game .parchment-middle {background-position: -211px -294px;}
    .game.credits .parchment-middle, .game.death .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:346px;margin-left:-173px;background-position: -38px -294px;}
    #resize-check {height:1px;}

    #name-tooltip {font-size:10px;width:180px;margin-left:-90px;height:10px;line-height:10px;top:-30px;border-radius:4px;}
    #name-tooltip:after {bottom:-8px;}
}


.tablet .animate .parchment-left, .tablet .animate .parchment-right, .tablet .animate .parchment-middle {-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;}
.tablet #instructions, .tablet #lists {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}

.tablet #coinsparks {display:none; -moz-animation:none;}

.tablet #logo, .tablet #parchment, .tablet #container {-moz-transition:none;}
